import * as React from "react";
import {Button, Grid, Stack, TextField, Typography} from "@mui/material";
import Background from "../../components/Background.tsx";
import {useNavigate} from "react-router-dom";
import {useState} from "react";
import {useLogin} from "../../hooks/useLogin.ts";

const Login: React.FC = () => {
    const navigate = useNavigate();

    const [id, setId] = useState('');
    const [password, setPassword] = useState('');
    const {login, isLoading, error} = useLogin();

    // 设置登录样式
    const [loginText, setloginText] = useState('登录');
    const [textColor, setTextColor] = useState('initial');

    // 异步处理登录功能
    const handleLogin = async () => {
        await login(id, password);
        if (error) {
            setloginText(error);
            setTextColor('#f26868');
            setTimeout(() => {
                setloginText('登录');
                setTextColor('initial');
            }, 3000);
        }
    };

    return (
        <>
            <Background/>
            <div style={{position: 'absolute', top: 0, left: 0, right: 0, bottom: 0}}>
                <Grid container justifyContent="center" alignItems="center" spacing={2}
                      style={{minHeight: '100vh'}}>
                    <Grid item xs={8}>
                        <div style={{
                            padding: '5%',
                            paddingBottom: '8%',
                            border: '1px solid #ccc',
                            borderRadius: '25px',
                            backgroundColor: 'rgba(255, 255, 255, 0.8)',
                            boxShadow: '0px 2px 5px rgba(0, 0, 0, 0.2)',
                        }}>
                            <Grid container justifyContent="flex-end" alignItems="center" spacing={2}
                                  paddingRight={"8.33%"}>
                                <Grid item xs={6}>
                                    <img src="/assets/icon.png" alt="Logo" width="15%"/>
                                    <Typography variant="h5" sx={{marginTop: 4, marginBottom: 2, color: '#21c491'}}>
                                        欢迎登录韵匙管理后台
                                    </Typography>
                                    <Typography variant="body2" sx={{marginTop: 1, color: '#bae3d6'}}>
                                        System management background
                                    </Typography>
                                </Grid>
                                <Grid item xs={5}>
                                    {/*登录字体*/}
                                    <Typography variant="h4" sx={{
                                        marginTop: 4,
                                        marginBottom: 2,
                                        color: textColor,
                                        transition: 'color 0.6s ease'
                                    }}>
                                        {loginText}
                                    </Typography>

                                    {/*工号输入*/}
                                    <Typography variant="body2" sx={{marginTop: 6, marginBottom: 0, color: '#616161'}}>
                                        请输入工号
                                    </Typography>
                                    <TextField variant="standard" fullWidth margin="normal" required value={id}
                                               onChange={(e) => setId(e.target.value)}/>

                                    {/*密码输入*/}
                                    <Typography variant="body2" sx={{marginTop: 4, marginBottom: 0, color: '#616161'}}>
                                        请输入密码
                                    </Typography>
                                    <TextField variant="standard" type="password" autoComplete="current-password"
                                               fullWidth margin="normal" required
                                               onChange={(e) => setPassword(e.target.value)}/>

                                    {/*注册账号以及忘记密码*/}
                                    <Stack direction="row" justifyContent="space-between" alignItems="center">
                                        <Button size="small" onClick={() => navigate('/register')}
                                                sx={{color: '#90c9b7'}}>注册账号</Button>
                                        <Button size="small" onClick={() => navigate('/forgetPassword')}
                                                sx={{color: '#90c9b7'}}>忘记密码</Button>
                                    </Stack>

                                    {/*登录按钮*/}
                                    <Button type="submit" fullWidth variant="contained" size="large"
                                            color="primary" disabled={isLoading}
                                            onClick={handleLogin}
                                            sx={{
                                                marginTop: 2,
                                                backgroundColor: '#21c491',
                                                '&:hover': {backgroundColor: '#1eb384'}
                                            }}>
                                        {isLoading ? 'LOGGING IN...' : 'LOGIN'}
                                    </Button>

                                </Grid>
                            </Grid>
                        </div>
                    </Grid>
                </Grid>
            </div>
        </>
    );
};
export default Login;
